<!DOCTYPE html>
<html>
<head>
    <title>Optical Path Diagram</title>
</head>
<body>
<canvas id="myCanvas" width="500" height="400"></canvas>

<script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');

    // Parameters
    const cx = 250;
    const cy = 180;
    const R_val = 120; // Canvas radius
    const r_val = 80;  // Canvas distance for r

    // --- Helper function to draw an arrow ---
    function drawArrow(ctx, x1, y1, x2, y2, headlen = 10) {
        const angle = Math.atan2(y2 - y1, x2 - x1);
        
        // Draw the line
        ctx.beginPath();
        ctx.moveTo(x1, y1);
        ctx.lineTo(x2, y2);
        
        // Draw the arrowhead
        ctx.moveTo(x2, y2);
        ctx.lineTo(x2 - headlen * Math.cos(angle - Math.PI / 6), y2 - headlen * Math.sin(angle - Math.PI / 6));
        ctx.moveTo(x2, y2);
        ctx.lineTo(x2 - headlen * Math.cos(angle + Math.PI / 6), y2 - headlen * Math.sin(angle + Math.PI / 6));
        
        ctx.stroke();
    }

    // --- Main Drawing ---

    // Set common styles
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 2.5;

    // 1. Draw the main circle (sphere)
    ctx.beginPath();
    ctx.arc(cx, cy, R_val, 0, 2 * Math.PI);
    ctx.stroke();

    // 2. Draw the dashed diameter AOB
    ctx.beginPath();
    ctx.setLineDash([7, 5]);
    ctx.moveTo(cx - R_val, cy);
    ctx.lineTo(cx + R_val, cy);
    ctx.stroke();
    ctx.setLineDash([]); // Reset to solid line for subsequent drawings

    // 3. Draw points O (center) and P (object)
    // Point O
    ctx.beginPath();
    ctx.arc(cx, cy, 3, 0, 2 * Math.PI);
    ctx.fill();

    // Point P
    const px = cx - r_val;
    const py = cy;
    ctx.beginPath();
    ctx.arc(px, py, 3, 0, 2 * Math.PI);
    ctx.fill();

    // 4. Draw the radius vector R
    const angleR = -Math.PI / 4;
    const endRx = cx + R_val * Math.cos(angleR);
    const endRy = cy + R_val * Math.sin(angleR);
    drawArrow(ctx, cx, cy, endRx, endRy);

    // 5. Add all text labels
    ctx.font = 'italic 24px "Times New Roman"';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    
    // Labels on the diameter: A, B, O, P
    ctx.fillText('A', cx + R_val + 20, cy);
    ctx.fillText('B', cx - R_val - 20, cy);
    ctx.fillText('O', cx + 12, cy - 12);
    ctx.fillText('P', px, cy - 20);
    
    // Quantity labels: R, r, n
    ctx.fillText('R', cx + 0.6 * R_val * Math.cos(angleR) + 20, cy + 0.6 * R_val * Math.sin(angleR));
    ctx.fillText('r', cx - r_val / 2, cy + 25);
    ctx.fillText('n', cx, cy + R_val * 0.65);

    // 6. Add the figure caption
    ctx.font = '22px "Songti SC", "SimSun"';
    ctx.textAlign = 'center';
    ctx.fillText('图 1', cx, cy + R_val + 50);

</script>
</body>
</html>